<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .big {
        position: relative;
        height: 2000px;
      }
      .box {
        /* margin: 0 auto; */
        width: 150px;
        height: 200px;
        /* border: 1px solid skyblue; */
        background-image: url("./火箭.png");
        /* animation: run 1s steps(6) 0s infinite; */
        position: absolute;
        bottom: 0;
        right: 0;
      }
      .box:hover {
        background-position: -150px 0;
      }
      .fly {
        animation: run 1s steps(5) 0s infinite;
      }
      @keyframes run {
        from {
          background-position: -150px 0;
        }
        to {
          background-position: -892px 0;
        }
      }
      body {
        background-image: linear-gradient(skyblue, pink);
      }
    </style>
  </head>
  <body>
    <div class="big">
      <div class="box"></div>
    </div>
    <script>
      let big = document.querySelector(".big");
      let box = document.querySelector(".box");
      let step1 = 32;
      let step2 = 50;

      // let i = 1;
      // console.log(document.documentElement.scrollTop);
      box.addEventListener("click", function () {
        var a = 0;
        let timer = setInterval(function () {
          box.classList.add("fly");
          a += step2;
          box.style.bottom = a + "px";

          document.documentElement.scrollTop -= step1;
          // console.log(document.documentElement.scrollTop);
          if (document.documentElement.scrollTop == 0) {
            clearInterval(timer);
          }
          if (box.style.bottom == 2050 + "px") {
            box.style.bottom = 0;
            box.classList.remove("fly");
          }
          console.log(box.style.bottom);
        }, 16);
        // i++;
      });
    </script>
  </body>
</html>
